<template>
	<view class="expenseCalendar">
		<view class="expenseCalendar-ul" v-for="(item,index) in expenseCalendar">
			<view class="expenseCalendar-bj">
				<view class="expenseCalendar-right">
					<text>VIP</text>
				</view>
				<view class="expenseCalendar-left">
					<text>会员专属权益</text>
				</view>
			</view>
			<view class="expenseCalendar-txt">
				<view class="expenseCalendar-txt-li">
					<view class="expenseCalendar-txt-z">
						<text>咨询会员消费</text>
					</view>
					<view class="expenseCalendar-txt-y">
						<text @click="removeMsg(index)">移除</text>
					</view>
				</view>
				<view class="expenseCalendar-txt-y">
					<text>{{item.money}}元</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				expenseCalendar: [{
						money: "4444",
					},
					{
						money: "1111",
					},
					{
						money: "0000",
					},
				]
			}
		},
		methods: {
			removeMsg(index) {
				this.expenseCalendar.splice(index, 1)
			}
		}
	}
</script>

<style lang="less" scoped>
	.expenseCalendar {
		.expenseCalendar-ul {
			width: 700rpx;
			padding: 50rpx  0rpx 50rpx 50rpx;
			display: flex;
			align-items: center;
			.expenseCalendar-bj {
				width: 229rpx;
				height: 138rpx;
				background: linear-gradient(90deg, #CC9F64 0%, #F5E0C5 100%);

				.expenseCalendar-right {
					padding: 15rpx 30rpx 15rpx 143rpx;

					text {
						font-size: 40rpx;
						font-family: DIN;
						font-weight: bold;
						color: #D18A4E;
					}
				}

				.expenseCalendar-left {
					padding: 0 12rpx;

					text {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			.expenseCalendar-txt {
				width: 400rpx;
				margin-left: 40rpx;
				.expenseCalendar-txt-li {
					display: flex;
					justify-content: space-between;
					.expenseCalendar-txt-z {
						display: flex;
						justify-content: center;
						flex-direction: column;

						text {
							font-size: 36rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #000000;
						}
					}

					.expenseCalendar-txt-y {
						display: flex;
						align-items: center;
						text {
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}
					}
				}

				.expenseCalendar-txt-y {
					margin-top: 20rpx;

					text {
						font-size: 36rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #FF0000;
					}
				}
			}
		}
	}
</style>
